import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import { getAnnualCardList } from '@/api/annual'
import { staticUrl,concatUrl } from '@/utils'

import './index.scss'

const Default = staticUrl('/img/user/default-agreement.png')
const Diy = staticUrl('/img/user/diy-agreement.png')

interface State {
  list: any
  page: number
  isTotal: boolean
}

export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      list: [],//年卡列表
      page: 1,//当前页数
      isTotal: false,// 是否可以继续下拉
    }
  }

  state: State

  config = {
    navigationBarTitleText: '电子协议',
    enablePullDownRefresh: true,
  }

  // 监听用户下拉刷新事件
  onPullDownRefresh() {
    this.setState({
      list: [],//年卡列表
      page: 1,//当前页数
      isTotal: false
    }, () => {
      // 获取电子协议列表
      this.getAnnualCardList()
    })
  }

  UNSAFE_componentWillMount() { }
  componentDidMount() {
    // 获取电子协议列表
    this.getAnnualCardList()
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }

  // 获取电子协议列表
  async getAnnualCardList() {
    const { list, page, isTotal } = this.state
    if (!isTotal) {
      await getAnnualCardList({ query: { "filter": { "and": [] }, "perPage": 20, "page": page } }).then((res) => {
        Taro.stopPullDownRefresh()
        const { data: { data } } = res
        const total = res.header['X-Pagination-Total-Count']
        const newList = list.length == 0 ? data : [...list, ...data]
        this.setState({
          list: newList,
          page: page + 1,
          isTotal: newList.length >= total ? true : false
        })
      }).catch(() => {
        Taro.stopPullDownRefresh()
      })
    }
  }

  onReachBottom() {
    const { isTotal } = this.setState
    if (!isTotal) {
      // 获取抽奖记录
      this.getAnnualCardList()
    }
  }

  // 跳转年卡协议
  goLink(val) {
    const { id } = val
    const obj = {
      path: '/annual-review/annual-card',
      id,
      operation: false,
    }
    Taro.navigateTo({
      url: concatUrl('/pages/order/agreement/index', obj)
    })
  }

  render() {
    const { list } = this.state;
    return (
      <View className="body" >
        <View className="head">我的年卡</View>
        <View className="list">
          {
            list && list.length > 0 && list.map((val) => {
              return (
                <View className="detail" key={val.time} onClick={() => this.goLink(val)}>
                  <Image src={val.type == 1 ? Default : Diy} className="detail-bg" />
                  <View className="detail-head">
                    <Text className="detail-price">{val.needPayPrice}</Text>
                    <Text className="detail-title">{val.annualCardName}</Text>
                  </View>
                  <View className="detail-agreement">
                    查看协议<AtIcon className="detail-agreement-icon" value='chevron-right' size='12' color='#ffffff'></AtIcon>
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className="bottom">
          我是有底线的~
        </View>
      </View>
    )
  }
}
